<template>
  <el-card shadow="never">
    <template #header>
      <div>
        <span>{{ $t("form.public.assignedUsers") }}</span>
        <span class="desc-text ml10">{{ $t("form.public.assignedUsersDescText") }}</span>
      </div>
    </template>
    <div class="publish-content">
      <el-row :gutter="15">
        <el-col :span="1.5">
          <assign-button-list
            :form-key="queryParams.formKey"
            @refresh="queryTodoFormList"
          />
        </el-col>
        <el-col :span="1.5">
          <el-button
            plain
            size="default"
            type="danger"
            @click="handleDeleteAssignUser()"
          >
            {{ $t("formI18n.all.delete") }}
          </el-button>
        </el-col>
      </el-row>
      <el-divider />
      <el-table
        v-loading="loading"
        :data="todoList"
        max-height="50vh"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          align="center"
          type="selection"
          width="55"
        />
        <el-table-column
          align="center"
          :label="$t('form.public.nickName')"
          prop="userName"
        />
        <el-table-column
          align="center"
          :label="$t('form.public.status')"
          prop="status"
        >
          <template #default="scope">
            <el-tag
              v-if="scope.row.status === 0"
              type="danger"
            >
              {{ $t("form.public.unfinished") }}
            </el-tag>
            <el-tag
              v-else
              type="success"
            >
              {{ $t("form.public.finished") }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('form.public.completeTime')"
          prop="updateTime"
        />
        <el-table-column
          align="center"
          :label="$t('form.public.assignTime')"
          prop="createTime"
        />
        <el-table-column
          align="center"
          class-name="small-padding fixed-width"
          :label="$t('form.public.assignedUsersOperation')"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleDeleteAssignUser(scope.row)"
            >
              {{ $t("formI18n.all.delete") }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        v-model:limit="queryParams.size"
        v-model:page="queryParams.current"
        :total="total"
        @pagination="queryTodoFormList"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts" name="TargetedPublish">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { delTodo, listAllTodo } from "@/api/project/todo";
import AssignButtonList from "@/views/form/publish/TodoForm/AssignButtonList.vue";
import { i18n } from "@/i18n";
import { ElMessageBox } from "element-plus";
import { MessageUtil } from "@/utils/messageUtil";

const formKey = ref<string>("");
const loading = ref<boolean>(false);
const total = ref<number>(0);
const todoList = ref<any[]>([]); // 用泛型 any[]，可以根据具体数据结构替换
const ids = ref<number[]>([]);
const route = useRoute();

// 查询参数
const queryParams = ref({
  current: 1,
  size: 10,
  formKey: "",
  taskId: 0
});

// 查询待填写表单数据
const queryTodoFormList = async () => {
  loading.value = true;
  queryParams.value.formKey = formKey.value;
  try {
    const response = await listAllTodo(queryParams.value);
    todoList.value = response.data.records;
    total.value = response.data.total;
  } finally {
    loading.value = false;
  }
};

// 处理多选选中
const handleSelectionChange = (selection: any[]) => {
  ids.value = selection.map(item => item.id);
};

// 删除分配用户
const handleDeleteAssignUser = async (row?: any) => {
  const dataIdList = row ? [row.id] : ids.value;
  try {
    await ElMessageBox.confirm(i18n.global.t("formI18n.all.deleteConfirmation"), i18n.global.t("formI18n.all.waring"), {
      confirmButtonText: i18n.global.t("formI18n.all.confirm"),
      cancelButtonText: i18n.global.t("formI18n.all.cancel"),
      type: "warning"
    });
    await delTodo({ dataIdList, formKey: formKey.value });
    MessageUtil.success(i18n.global.t("formI18n.all.success"));
    await queryTodoFormList();
  } catch (error) {
    // 用户取消操作或错误处理
  }
};

// 初始化
onMounted(() => {
  formKey.value = route.query.key as string;
  queryTodoFormList();
});
</script>

<style lang="scss" scoped>
.publish-content {
  padding: 20px;
}

.auth-obj-tag {
  margin: 2px;
}
</style>
